<template>
  <div class="dict-container">
    <el-row :gutter="20">
      <div class="search">
        <el-form :inline="true" :model="searchform" ref="searchform" class="demo-form-inline">
          <el-form-item label="字典查询" prop="key">
            <el-input v-model="searchform.key" clearable placeholder="字典查询" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="listPage">查询</el-button>
            <el-button type="primary" size="mini" @click="resetForm('searchform')">重置</el-button>
            <el-button type="primary" size="mini" @click="refreshDictType">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body">
        <el-button type="primary" size="mini" @click="handleAdd(2)">添加字典</el-button>
        <el-table
          :data="dicts"
          style="margin:20px 0px;"
          row-key="id"
          border
          align="center"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="name" label="字典名称"></el-table-column>
          <el-table-column prop="value" label="字典值"></el-table-column>
          <el-table-column prop="code" label="字典编码"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="{row}">
              <span v-text="row.status === 1 ? '正常': '禁用'"></span>
            </template>
          </el-table-column>
          <el-table-column prop="descript" label="描述"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作" width="200px" fixed="right" header-align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(2, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- <el-pagination
          style="text-align:center;"
          :current-page="searchform.pageNum"
          :page-sizes="[10, 15, 20]"
          :page-size="searchform.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination> -->
      </div>
    </el-row>

    <!-- 新增 / 编辑 -->
    <add-and-update
      ref="addAndUpdate"
      v-model="dialogVisible"
      :dicTypes="dicTypes"
      :type="type"
      @refresh="refresh"
    ></add-and-update>
  </div>
</template>

<script>
import { listDicType, listPage, delDict, delDicType } from "@/api/dict";
import addAndUpdate from "./add-and-update/index";
export default {
  name: "dict",
  components: { addAndUpdate },
  data() {
    return {
      filterTree: "",
      type: null,
      dicTypes: [],
      defaultProps: {
        children: "children",
        label: "tname"
      },
      dicts: [],
      searchform: {
        pageNum: 1,
        pageSize: 10,
        key: "",
        typeId: null
      },
      total: 0,
      dialogVisible: false
    };
  },
  created() {
    this.listDicTypes();
    this.listPage();
  },
  methods: {
    async listDicTypes() {
      const { data } = await listDicType();
      this.dicTypes = data;
    },
    async listPage() {
      const { data } = await listPage(this.searchform);
      this.dicts = data.data;
      this.searchform.pageNum = data.pageNum;
      this.searchform.pageSize = data.pageSize;
      this.total = data.total;
    },
    handleNodeClick(data) {
      this.searchform.typeId = data.id;
      this.listPage(this.searchform);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.tname.indexOf(value) !== -1;
    },
    handleAdd(type) {
      this.type = type;
      this.$refs["addAndUpdate"].init({ isShowDicType: false }, type);
      this.dialogVisible = true;
    },
    handleEdit(type, row) {
      this.type = type;
      this.$refs["addAndUpdate"].init(row, type);
      this.$nextTick(() => {
        this.dialogVisible = true;
      });
    },
    handleDelete(scope, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await delDict(row.id);
          this.listPage(this.searchform);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetForm(formname) {
      this.$refs[formname].resetFields();
    },
    refresh() {
      if (this.type === 1) {
        this.listDicTypes();
      }
      this.dialogVisible = false;
      this.listPage();
    },
    appendDicType(data, event) {
      event.stopPropagation(); // 阻止事件冒泡 --》 handleNodeClick（）
      this.type = 1;
      this.$refs["addAndUpdate"].init(
        { dicTypePid: data.id, isShowDicType: true },
        1
      );
      this.$nextTick(() => {
        this.dialogVisible = true;
      });
    },
    editDicType(data, event) {
      event.stopPropagation(); // 阻止事件冒泡 --》 handleNodeClick（）
      this.type = 1;
      this.$refs["addAndUpdate"].init({ ...data, isShowDicType: false }, 1);
      this.$nextTick(() => {
        this.dialogVisible = true;
      });
    },
    removeDicType(data, event) {
      event.stopPropagation(); // 阻止事件冒泡 --》 handleNodeClick（）
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          if (data.children.length > 0) {
            this.$message({
              type: "warning",
              message: "此分类下面存在数据，禁止删除"
            });
          } else {
            await delDicType(data.id);
            this.listDicTypes();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    refreshDictType() {
      this.searchform.typeId = null;
      this.listPage();
    }
  },
  watch: {
    filterTree(val) {
      this.$refs["tree"].filter(val);
    }
  }
};
</script>

<style lang="scss">
.dict {
  &-container {
    margin: 30px;
  }
  &-left-dept-tree {
    margin-right: 10px;
    background-color: #fff;
  }
  &-right-list {
    .search {
      height: 70px;
      padding: 10px 10px;
      border-radius: 5px;
      background-color: #fff;
    }

    .body {
      border-radius: 5px;
      background-color: #fff;
      margin: 20px 0px;
      padding: 20px 10px;
    }
  }

  &-left-dept-tree,
  &-right-list {
    height: 600px;
  }
}

.dict-container .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>